<template>
  <section class="page2">
    我是page2页面<strong style="color: red">合并行</strong>
    <section>
      <el-table
        border
        ref="multipleTable"
        :data="tableData"
        :span-method="objectSpanMethod"
      >
        <el-table-column prop="itemIndex" fixed label="序号"> </el-table-column>
        <el-table-column
          prop="itemName"
          label="事项名称"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="itemCode"
          label="实施编码"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="areaName"
          label="通办地区"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="applyCount"
          label="申办量"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="acceptCount"
          label="受理量"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="acceptRate"
          label="受理率"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="finishCount"
          label="办结量"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="priorFinishCount"
          label="提前办结量"
          show-overflow-tooltip
        ></el-table-column>
      </el-table>
    </section>
  </section>
</template>
<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      tableData: [],
      dataList: [
        {
          itemName: "新个人事项（普通）~ylp ",
          itemCode: "12334",
          apprCommonBitemSdataSubVos: [
            {
              areaCode: null,
              areaName: "北京市",
              applyCount: 463,
              acceptCount: 90,
              finishCount: 54,
              priorFinishCount: 52,
              overtimeFinishCount: 1,
              overtimeNofinishCount: 0,
              acceptRate: 19.43844492440605,
              priorFinishRate: 11.23110151187905,
            },
            {
              areaCode: "440200",
              areaName: "韶关市",
              applyCount: 3,
              acceptCount: 0,
              finishCount: 0,
              priorFinishCount: 0,
              overtimeFinishCount: 0,
              overtimeNofinishCount: 0,
              acceptRate: 0.0,
              priorFinishRate: 0.0,
            },
          ],
        },
        {
          itemName: "测试企业事项zwd",
          itemCode: "test2&lt",
          apprCommonBitemSdataSubVos: [
            {
              areaCode: null,
              areaName: "天津",
              applyCount: 581,
              acceptCount: 226,
              finishCount: 74,
              priorFinishCount: 67,
              overtimeFinishCount: 5,
              overtimeNofinishCount: 0,
              acceptRate: 38.89845094664372,
              priorFinishRate: 11.53184165232358,
            },
          ],
        },
      ],
    };
  },
  methods: {
    getArrList() {
      let arr = [];
      this.dataList.forEach((item, index) => {
        if (item.apprCommonBitemSdataSubVos.length > 0) {
          item.apprCommonBitemSdataSubVos.forEach((value, i) => {
            let listItem = {
              rowSpan: i == 0 ? item.apprCommonBitemSdataSubVos.length : "",
              itemName: item.itemName,
              itemCode: item.itemCode,
              itemIndex: index,
              ...value,
            };
            arr.push(listItem);
          });
        } else {
          let listItem = {
            itemName: item.itemName,
            itemCode: item.itemCode,
            apprCommonBitemSdataSubVos: [],
          };
          arr.push(listItem);
        }
      });
      // return arr;
      this.tableData = arr;
    },

    //跨行
    //跨行
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
        console.log(column, rowIndex);
        if (row.rowSpan) {
          let _rowspan = row.rowSpan;
          return {
            rowspan: _rowspan,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      } 
    },
  },
  computed: {},
  created() {
    this.getArrList();
    console.log(this.tableData);
  },
  mounted() {},

  watch: {},
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/resetPadding.scss";
.page2 {
  @include commnpadding;
}
</style>
